<template>
	<view class="container">
		<view >
		<scroll-view scroll-y="true" style="height: 100%;">
			<list ref="refList" url="/api/v1/product/collection"
				res="data.data">
				<template #list="{list}">
					<view class="collectUl">
						<view   v-for="(item,index) in list" :key="index"
							 class="collectli" @click="route('pages/lesson/lessonIntro',{id:item.product_id})">
							<view >
								<image :src="imgUrl(item?.product?.cover?.[0]?.url)" style="width: 100%; height: 250rpx;
								border-radius:12rpx 12rpx 0 0">
								</image>
							</view>
							<view class="textBox">
								<view class="title">{{item.product.title}}</view>
								<view class="txtNumber">¥{{item.product.price}}</view>
								<view class="schoolBox">
									<view class="txtAdd01">已报名{{item.product.real_sales+item.product.sales}}人</view>
									<view class="txtNumber" @click.stop="collect(item.product.id)">
									  <uv-icon slot="icon" size="22" name="star-fill" color="#ffcc33"></uv-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</list>
			<!-- 更多内容 -->
		</scroll-view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref, nextTick } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import UniArea from '@/components/uni-city/uni-area.vue';
	import list from '@/components/list';
	onLoad(() => {
		get_list()
	});
	//「地址选择器」「地址」「搜索」「菜单」「分页」  「菜单id」
	const [refList,loading] = [ref(),ref()];
	//获取分页
	const get_list = () => {
		nextTick(() => {
			refList.value.init()
		})
	};
	const collect = (e) => {
		let params = {
			product_id: e,
		}
		http.post(`/api/v1/product/collection`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('收藏成功！');
				get_list();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
</script>
<style lang="scss" scoped>
	.container {
		background:#fff;
		min-height:100vh;
	}

	.collectUl {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.collectUl .collectli {
		margin-top: 20rpx;
		width: 48%;
		background: #FAFAFA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 0
	}

	.collectUl .textBox {
		padding: 10rpx 20rpx;
		line-height: 42rpx;
	}

	.title {
		/* margin-bottom: 5rpx; */
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}

	.txtNumber {
		font-size: 26rpx;
		line-height: 30rpx;
		font-weight: bold;
		color: #31C0ED;
		padding:5rpx 0 0;
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-top: 10rpx; */
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
		padding:6rpx 0;
	}
</style>